<template>
  <div class="header">
    <div class="top w">
      <h1>
        <img src="../../assets/logo2.png" alt="" style="height: 90px" />
        <!-- <img
          src="../../assets/logo2.png"
          alt=""
          style="width: 170px; height: 46px"
        /> -->
      </h1>
      <div class="nav">
        <ul class="clearfix">
          <!-- <li>
            <router-link to="/"  @click="navChange(0)" >音乐馆</router-link>
          </li>
          <li>
            <router-link to="/mymusic" @click="navChange(1)" > 我的音乐 </router-link>
          </li>
          <li>
            <router-link to="/xxx" @click="navChange(2)" > 客户端 </router-link>
          </li>
          <li>
            <router-link to="/xxxxx" @click="navChange(3)" > 开放平台 </router-link>
          </li>
          <li>
            <router-link to="/xxxxxxx" @click="navChange(4)" > VIP </router-link>
          </li> -->
          <li v-for="item in nav" :key="item.id">
            <!-- <router-link
              :to="item.path"
              @click.native="navChange(item.id)"
              exact-active-class="oneLink-active"
              >{{ item.name }}</router-link
            > -->
            <router-link
              :to="item.path"
              @click.native="navChange(item.id)"
              :class="navActive === item.id ? 'oneLink-active' : null"
              exact-active-class="oneLink-active"
              >{{ item.name }}</router-link
            >
          </li>
        </ul>
      </div>
      <div class="other">
        <!-- 搜索框 和登录 -->
        <!-- <el-input
          placeholder="搜索音乐 MV 歌单 用户"
          v-model="input"
          clearable
          @focus="inputChange"
        >
        </el-input> -->
        <div class="search" @click="inputChange">
          <i class="el-icon-search"></i>

          搜索音乐 MV 歌单 用户
        </div>
        <a
          href="javascript:;"
          @click="toLoginPage"
          v-if="!userStoreProfile.nickname"
          >登录</a
        >
        <div class="userInfo" v-else>
          <img
            :src="userStoreProfile.avatarUrl"
            :alt="userStoreProfile.nickname"
          />
          <div>{{ userStoreProfile.nickname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "GlobalHeader",
  components: {},
  data() {
    return {
      input: "",
      navActive: 0,
      nav: [
        { id: 0, path: "/", name: "音乐馆" },
        { id: 1, path: "/mymusic", name: "我的音乐" },
        { id: 2, path: "/xxx", name: "客户端" },
        { id: 3, path: "/xxxxxx", name: "开放平台" },
        { id: 4, path: "/xxxxxxxxx", name: "VIP" },
      ],
    };
  },
  created() {},
  mounted() {
    // 获取到  home 的路由表
    // console.log(this.$router.options);
    // console.log("当前路由", this.$route);
    // console.log(this.$subNavWhiteList);
  },

  methods: {
    navChange(index) {
      this.navActive = index;
      // console.log(index);
    },
    toLoginPage() {
      // 保留 一下 在访问登录页之前的地址
      this.navActive = this.nav.length + 1;
      console.log(this.$route);
      this.$router.push({
        path: "/login",
        query: {
          path: encodeURI(this.$route.fullPath),
        },
      });
    },
    inputChange() {
      console.log("input改变");
      this.$router.push("/search");
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
    }),
  },
};
</script>

<style lang="less" scoped>
.oneLink-active {
  background-color: @globalColor;
  color: #fff !important;
}

.header {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    border-bottom: 1px solid rgb(242, 242, 242);
    // nav
    .nav {
      li {
        float: left;
      }
      a {
        display: block;
        // background-color: @globalColor;
        color: #333;
        width: 94px;
        height: 90px;
        text-align: center;
        line-height: 90px;
        font-size: 18px;
        &:hover {
          color: @globalColor;
        }
      }
    }
    .other {
      display: flex;
      align-items: center;
      /deep/ .el-input {
        width: 210px;
      }
      .search {
        font-size: 14px;
        border: 1px solid #c9c9c9;
        border-radius: 15px;
        padding: 4px 20px;
        padding-left: 10px;
        color: #999999;
        margin-right: 15px;
      }

      a {
        display: block;
        margin-left: 10px;
        width: 100px;
        height: 100%;
        background-color: #fff;
        font-size: 16px;
        color: #333;
        &:hover {
          color: @globalColor;
        }
      }
      .userInfo {
        display: flex;
        align-items: center;
        img {
          margin: 0 5px;
          margin-left: 10px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        div {
          white-space: nowrap;
          cursor: pointer;
          &:hover {
            color: @globalColor;
          }
        }
      }
    }
  }
}
</style>
